<!DOCTYPE html>
<html>
<head>
    <title>Polarization Rotation Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="800" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // General settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = "bold 20px 'Times New Roman'";
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';

        const cx = canvas.width / 2;
        const cy = canvas.height / 2;

        // Draw propagation axis
        ctx.beginPath();
        ctx.moveTo(0, cy);
        ctx.lineTo(canvas.width, cy);
        ctx.stroke();

        // --- Incoming Wave Section ---

        // Draw axes for incoming wave
        const ax1_x = 180;
        const ax1_len = 80;
        const ax1_diag_len = ax1_len * Math.cos(Math.PI / 4);

        ctx.beginPath();
        // Vertical axis
        ctx.moveTo(ax1_x, cy - ax1_len);
        ctx.lineTo(ax1_x, cy + ax1_len);
        // Diagonal axis (x-hat)
        ctx.moveTo(ax1_x - ax1_diag_len, cy + ax1_diag_len);
        ctx.lineTo(ax1_x + ax1_diag_len, cy - ax1_diag_len);
        // Perpendicular diagonal axis
        ctx.moveTo(ax1_x - ax1_diag_len, cy - ax1_diag_len);
        ctx.lineTo(ax1_x + ax1_diag_len, cy + ax1_diag_len);
        ctx.stroke();

        // Arrow and label for x-hat
        const x_hat_end_x = ax1_x + ax1_diag_len;
        const x_hat_end_y = cy - ax1_diag_len;
        ctx.beginPath();
        ctx.moveTo(x_hat_end_x, x_hat_end_y);
        ctx.lineTo(x_hat_end_x - 10, x_hat_end_y - 5);
        ctx.moveTo(x_hat_end_x, x_hat_end_y);
        ctx.lineTo(x_hat_end_x - 5, x_hat_end_y + 10);
        ctx.stroke();
        ctx.fillText('x̂', x_hat_end_x + 15, x_hat_end_y - 20);


        // Draw incoming wave
        const wave_amp = 40;
        const wave_len = 120;
        const k = 2 * Math.PI / wave_len;
        const start_x1 = 50;
        const end_x1 = 340;

        // Create diagonal hatch pattern
        const patternCanvas1 = document.createElement('canvas');
        const patternCtx1 = patternCanvas1.getContext('2d');
        patternCanvas1.width = 10;
        patternCanvas1.height = 10;
        patternCtx1.strokeStyle = 'black';
        patternCtx1.lineWidth = 1;
        patternCtx1.beginPath();
        patternCtx1.moveTo(0, 10);
        patternCtx1.lineTo(10, 0);
        patternCtx1.stroke();
        const hatchPattern1 = ctx.createPattern(patternCanvas1, 'repeat');

        // Path for filling
        ctx.beginPath();
        ctx.moveTo(start_x1, cy);
        for (let x = start_x1; x <= end_x1; x++) {
            const y = cy - wave_amp * Math.sin(k * (x - start_x1));
            ctx.lineTo(x, y);
        }
        ctx.lineTo(end_x1, cy);
        ctx.closePath();

        // Fill with pattern and stroke outline
        ctx.fillStyle = hatchPattern1;
        ctx.fill();
        ctx.stroke();


        // --- Optical Device ---
        const block_x = 350;
        const block_w = 40;
        const block_h = 240;
        const block_persp_x = 20;
        const block_persp_y = 20;

        ctx.beginPath();
        // Front edge
        ctx.moveTo(block_x, cy - block_h / 2);
        ctx.lineTo(block_x, cy + block_h / 2);
        // Top edge
        ctx.lineTo(block_x + block_w, cy + block_h / 2 - block_persp_y);
        // Right edge
        ctx.lineTo(block_x + block_w, cy - block_h / 2 - block_persp_y);
        // Back edge to top
        ctx.lineTo(block_x, cy - block_h / 2);
        ctx.stroke();
        // Top edge from front top
        ctx.beginPath();
        ctx.moveTo(block_x, cy - block_h / 2);
        ctx.lineTo(block_x + block_w, cy - block_h / 2 - block_persp_y);
        ctx.stroke();

        
        // --- Outgoing Wave Section ---

        // Draw axes for outgoing wave
        const ax2_x = 650;
        const ax2_len = 80;
        const ax2_diag_len = ax2_len * Math.cos(Math.PI / 4);
        
        ctx.beginPath();
        // Vertical axis (y-hat)
        ctx.moveTo(ax2_x, cy - ax2_len);
        ctx.lineTo(ax2_x, cy + ax2_len);
        // Diagonal axis
        ctx.moveTo(ax2_x - ax2_diag_len, cy + ax2_diag_len);
        ctx.lineTo(ax2_x + ax2_diag_len, cy - ax2_diag_len);
        // Perpendicular diagonal axis
        ctx.moveTo(ax2_x - ax2_diag_len, cy - ax2_diag_len);
        ctx.lineTo(ax2_x + ax2_diag_len, cy + ax2_diag_len);
        ctx.stroke();
        
        // Arrow and label for y-hat
        const y_hat_end_y = cy - ax2_len;
        ctx.beginPath();
        ctx.moveTo(ax2_x, y_hat_end_y);
        ctx.lineTo(ax2_x - 8, y_hat_end_y + 12);
        ctx.moveTo(ax2_x, y_hat_end_y);
        ctx.lineTo(ax2_x + 8, y_hat_end_y + 12);
        ctx.stroke();
        ctx.fillText('ŷ', ax2_x, y_hat_end_y - 20);


        // Draw outgoing wave
        const start_x2 = block_x + block_w - 5; // A small gap
        const end_x2 = 750;

        // Create vertical hatch pattern
        const patternCanvas2 = document.createElement('canvas');
        const patternCtx2 = patternCanvas2.getContext('2d');
        patternCanvas2.width = 8;
        patternCanvas2.height = 8;
        patternCtx2.strokeStyle = 'black';
        patternCtx2.lineWidth = 1;
        patternCtx2.beginPath();
        patternCtx2.moveTo(4, 0);
        patternCtx2.lineTo(4, 8);
        patternCtx2.stroke();
        const hatchPattern2 = ctx.createPattern(patternCanvas2, 'repeat');
        
        // Path for filling
        ctx.beginPath();
        ctx.moveTo(start_x2, cy);
        for (let x = start_x2; x <= end_x2; x++) {
            // Wave starts negative, so -sin, which becomes y+...
            const y = cy + wave_amp * Math.sin(k * (x - start_x2));
            ctx.lineTo(x, y);
        }
        ctx.lineTo(end_x2, cy);
        ctx.closePath();
        
        // Fill with pattern and stroke outline
        ctx.fillStyle = hatchPattern2;
        ctx.fill();
        ctx.stroke();

        // --- Figure Label ---
        ctx.fillStyle = 'black';
        ctx.fillText('Fig. 2.71', cx, canvas.height - 30);

    </script>
</body>
</html>